<template>
  <input 
  :type="type" 
  class="input" 
  :placeholder="placeholder"
   @input="dataChange"
   :class="{
       error:!isOk
       }"
       @blur="showTips">
</template>

<script>
export default {
    props:["type",'placeholder','rule','err_message'],
    data(){
        return {
            isOk: true,
        }
    },
    methods:{
        dataChange($event){
             // 设置不输入值的状态
            if(!$event.target.value){
                this.isOk = true;
            }else{
            //    创建正则表达式对象
                var regex = new RegExp(this.rule);
                 // 利用正则表达式判断用户输入的格式是否正确，输入格式正确就是true,错误就是false
                this.isOk = regex.test($event.target.value);
                // console.log(this.isOk)
            }
        //    通过触发事件，把数据传送给父组件
            this.$emit('input',$event.target.value);
            // console.log($event.target.value)
        },
        showTips(){
            // 输入错误的时候提示用户
            if(!this.isOk){
                // console.log(this.err_message);
                 this.$toast.fail(this.err_message);
            }
        }
    }
}
</script>

<style>
/* 设置样式 */
.input{
    margin-bottom: 5.556vw;
    width: 100%;
    height: 10.556vw;
    box-sizing: border-box;
    padding: 5.556vw;
    border: none;
    font-size: 5vw;
    color: #9a9c9a;
    border-bottom: 1px solid #757575;
    background-color: #fff;
    outline: none;

}
.error{
    border-color: red;
}
</style>